<!-- This partial include Add/Edit Pet and Success Modals -->

<!-- Pet Details Modal -->
<div class="modal modal-owner fade" id="petModal" tabindex="-1" data-ng-controller="PetDetailsController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-4">
              <h1 class="sub-header" data-ng-bind="petFormHeader"></h1>
              <em class="text-muted">Fill up pet basic information</em>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-4">
              <div class="form-group">
                <label for="firstName">Owner</label>
                <input type="text" class="form-control" id="firstName" data-ng-value="currentOwner.firstName + ' ' + currentOwner.lastName" readonly>
              </div>
              <div class="form-group">
                <label for="petName">Pet Name</label>
                <input type="text" class="form-control" id="petName" data-ng-model="currentPet.name">
              </div>
              <div class="form-group">
                <label for="petProfileImg">Pet Photo</label>
                <input type="file" class="form-control-file" id="petProfileImg" data-ng-src="images/pet-default.jpg">
              </div>
              <div class="form-group">
                <label for="birthDate">Birth Date</label>
                <input type="text" class="form-control" id="birthDate" data-ng-model="currentPet.birthDate" readonly>
              </div>
               <div class="form-group">
                <label for="type">Type</label>
                <select class="form-control" id="type" data-ng-model="currentPet.type.id">
                  <option data-ng-repeat="type in petTypes" data-ng-value="type.id" data-ng-bind="type.name" ng-selected="currentPet.type.id == type.id"></option>
                </select>
              </div>
              <div class="form-group form-group-action">
                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close" data-ng-click="save()">Save</button>
                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add New Pet Success Modal -->
<div class="modal modal-owner fade" id="addPetSuccessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Pet added successfully!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="alert alert-success" role="alert">
                Well done! You've successfully added a pet.
              </div>
              <div class="form-group form-group-action">
                <button class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitModal" data-dismiss="modal" aria-label="Close">Add New Visit</button>
                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Not Now</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit Pet Success Modal -->
<div class="modal modal-owner fade" id="editPetSuccessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Pet update successfully!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="alert alert-success" role="alert">
                Well done! You've successfully update a pet.
              </div>
              <div class="form-group form-group-action">
                <a href="owner_details.html" class="btn btn-primary">View owner's pets</a>
                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>